import React, { useEffect } from 'react'
import Header from '../../components/Header'
import Content from '../../components/Content'
import Footer from '../../components/Footer'
import { nanoid } from 'nanoid'
import store from '../../redux/store'
import { AddToDoAction, changeTextAction } from '../../redux/actions'
import "./index.css";

export default function Index() {
  // 监听键盘事件
  useEffect(() => {
    document.onkeydown = e => {
      if (e.key === "Enter") {
        // 提交数据
        console.log("提交输入的数据");
        let val = store.getState().todo.val;
        store.dispatch(AddToDoAction({ id: nanoid(), val, done: false }))
        store.dispatch(changeTextAction(""));
        console.log(store.getState().todo.list);

      }
    }
  }, [])

  return (
    <div className='container'>
      <Header />
      <ul className='myul'>
        {store.getState().todo.list.map(item => <Content {...item} key={item.id} />)}
      </ul>
      <Footer />
    </div>
  )
}
